<template>
  <div class="container">
    <NavBarBread :bread="[$route.meta.parentName, $route.meta.menuName]" />
    <div class="tool-container">
      <el-tabs v-model="activeName" @tab-click="initEcharts">
        <!-- 总量统计 -->
        <el-tab-pane label="总量" name="cruxAuditDataTotalVo">
          <transition name="fade-transform" mode="out-in">
            <div class="section">
              <div class="top-item-container">
                <statis-items ref="cruxAuditDataTotalVo" :counts="tabs[activeName]" tabName="cruxAuditDataTotalVo" @search="queryData"/>
              </div>
              <div class="section-container">
                <!-- 报警类型分布统计(总量) -->
                <div class="static-title">报警类型分布统计</div>
                <div class="alarmType-echarts-container" v-loading ="pieLoading">
                  <div class="left">
                    <pie-echarts id="allPieAlarmType" width="100%" height="600px" :tabName="activeName" :titleLocation="'left'" :options="alarmCount"/>
                  </div>
                  <div class="right">
                    <div>
                      <pie-echarts id="'allvehicleSellRetail'"  width="100%" height="300px" title="车辆摆卖报警大区分布-零售" :tabName="activeName" :options="vehicleSellRetail" :legend="pieLegend" />
                    </div>
                    <div>
                      <pie-echarts id="'allColonyRetail'" width="100%" height="300px" title="非属地上牌报警大区分布-零售" :tabName="activeName" :options="colonyRetail" :legend="pieLegend" />
                    </div>
                    <div>
                      <pie-echarts id="'allOffLocationRetail'" width="100%" height="300px" title="异地开票报警大区分布-零售" :tabName="activeName" :options="offLocationRetail" :legend="pieLegend" />
                    </div>
                    <div>
                      <pie-echarts id="'allVehicleSellTravel'" width="100%" height="300px" title="车辆摆卖报警大区分布-出行" :tabName="activeName" :options="vehicleSellTravel" :legend="pieLegend" />
                    </div>
                    <div>
                      <pie-echarts id="'allColonyTravel'" width="100%" height="300px" title="非属地上牌报警大区分布-出行" :tabName="activeName" :options="colonyTravel" :legend="pieLegend" />
                    </div>
                    <div>
                      <pie-echarts id="'allOffLocationTravel'" width="100%" height="300px" title="异地开票报警大区分布-出行" :tabName="activeName" :options="offLocationTravel" :legend="pieLegend" />
                    </div>
                  </div>
                </div>
                <!-- 车辆报警情况统计(总量) -->
                <div class="static-title">车辆报警情况统计</div>
                <div class="alarm-echarts-container" v-loading ="alarmBarLoading">
                  <statis-search modelName="alarmSearch" @search="queryStatic" :regions="resiosOptions" :province="provinceOptions" :cities="citiesOptions" :dealer="dealerOptions"/>
                  <bar-echarts id="allBarAlarmType" :horizontal="alarmCountBar.length <=40" :tabName="activeName" :options="alarmCountBarPage"  width="100%" height="400px" />
                  <bar-page v-show="alarmCountBar.length > 50" :total="alarmCountBar.length" @changePage="setDataShow" />
                </div>
                <!-- 跨区报警情况排名统计(总量) -->
                <div class="static-title">
                  跨区报警情况排名统计
                  <el-tooltip class="item" effect="dark" content="跨区报警包含“车辆摆卖报警”和“非属地上牌报警”" placement="bottom-start">
                    <i class="el-icon-warning-outline"></i>
                  </el-tooltip>
                </div>
                <div class="alarm-echarts-container">
                  <div class="alarm-inflow">
                    <div class="alarm-in inflow" v-loading ="crossOutBarLoading">
                      <div class="alarm-inflow-search-tool" style="margin-bottom: 10px;">
                        <div class="alarm-inflow-title">大区间跨区报警情况排名top10</div>
                        <div class="alarm-inflow-search">
                          <statis-search modelName="crossSearch" @search="queryStatic" :regions="resiosOptions" :province="provinceOptions" :cities="citiesOptions" :dealer="dealerOptions"/>
                        </div>
                      </div>
                      <div class="sort-container">
                        排序方式 <el-radio-group v-model="cruxAuditDataTotalVo.crossSortBy.sortKey">
                                  <el-radio label="rate">实际报警率</el-radio>
                                  <el-radio label="count">报警数</el-radio>
                                </el-radio-group>
                      </div>
                      <mix-echarts id="allCrossEcharts" :options="crossAlarmCount" :tabName="activeName" width="100%" height="420px" />
                    </div>
                    <div class="alarm-out inflow" v-loading ="crossInBarLoading">
                      <div class="alarm-inflow-search-tool" style="margin-bottom: 10px;">
                        <div class="alarm-inflow-title">大区内跨区报警率排名top10</div>
                        <div class="alarm-inflow-search">
                          <statis-search modelName="crossRateSearch" @search="queryStatic" :regions="resiosOptions" :province="provinceOptions" :cities="citiesOptions" :dealer="dealerOptions"/>
                        </div>
                      </div>
                      <div class="sort-container">
                        排序方式 <el-radio-group v-model="cruxAuditDataTotalVo.crossRateSortBy.sortKey">
                                  <el-radio label="rate">实际报警率</el-radio>
                                  <el-radio label="count">报警数</el-radio>
                                </el-radio-group>
                      </div>
                      <mix-echarts id="allCrossRateEcharts" :options="crossAlarmRate" :tabName="activeName" width="100%" height="420px" />
                    </div>
                  </div>
                </div>
                <!-- 非属地流入流出统计(总量) -->
                <div class="static-title">非属地流入流出统计</div>
                <div class="alarm-echarts-container">
                  <div class="alarm-inflow">
                    <div class="alarm-in inflow" v-loading ="inflowBarLoading">
                      <div class="alarm-inflow-search-tool">
                        <div class="alarm-inflow-title">非属地报备流入排名top10</div>
                        <div class="alarm-inflow-search">
                          <statis-search modelName="inflowSearch" @search="queryStatic" :show-dealer="false" :regions="resiosOptions" :province="provinceOptions" :cities="citiesOptions" :dealer="dealerOptions"/>
                        </div>
                      </div>
                      <bar-echarts id="allInEcharts" :tabName="activeName" :options="alarmInCountBar"  width="100%" height="420px" />
                    </div>
                    <div class="alarm-out inflow" v-loading ="outflowBarLoading">
                      <div class="alarm-inflow-search-tool">
                        <div class="alarm-inflow-title">非属地报备流出排名top10</div>
                        <div class="alarm-inflow-search">
                          <statis-search modelName="outflowSearch" @search="queryStatic" :show-dealer="false" :regions="resiosOptions" :province="provinceOptions" :cities="citiesOptions" :dealer="dealerOptions"/>
                        </div>
                      </div>
                      <bar-echarts id="allOutEcharts" :tabName="activeName" :options="alarmOutCountBar"  width="100%" height="420px" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </transition>
        </el-tab-pane>
        <!-- 零售统计 -->
        <el-tab-pane label="零售" name="cruxAuditDataRetailVo">
          <transition name="fade-transform" mode="out-in">
            <div class="section">
              <div class="top-item-container">
                <statis-items ref="cruxAuditDataRetailVo" :counts="tabs[activeName]" @search="queryData"/>
              </div>
              <div class="section-container">
                <!-- 报警类型分布统计(零售) -->
                <div class="static-title">零售车报警类型分布统计</div>
                <div class="alarmType-echarts-container">
                  <div class="left">
                    <pie-echarts id="rPieAlarmType" width="100%" height="450px" :tabName="activeName" :titleLocation="'left'" :options="totleRetailCount"/>
                  </div>
                  <div class="right" style="align-items: center;">
                    <div>
                      <pie-echarts id="'rvehicleSellRetail'" width="100%" height="300px" title="车辆摆卖报警大区分布-零售" :tabName="activeName" :options="vehicleSellRetail" :legend="pieLegend" />
                    </div>
                    <div>
                      <pie-echarts id="'rColonyRetail'" width="100%" height="300px" title="非属地上牌报警大区分布-零售" :tabName="activeName" :options="colonyRetail" :legend="pieLegend" />
                    </div>
                    <div>
                      <pie-echarts id="'rOffLocationRetail'" width="100%" height="300px" title="异地开票报警大区分布-零售" :tabName="activeName" :options="offLocationRetail" :legend="pieLegend" />
                    </div>
                  </div>
                </div>
                <!-- 车辆报警情况统计(零售) -->
                <div class="static-title">零售车辆报警情况统计</div>
                <div class="alarm-echarts-container" v-loading ="alarmBarLoading">
                  <statis-search modelName="alarmSearch" @search="queryStatic" :regions="resiosOptions" :province="provinceOptions" :cities="citiesOptions" :dealer="dealerOptions"/>
                  <bar-echarts id="rBarAlarmType" :horizontal="alarmCountBar.length <=40" :tabName="activeName" :options="alarmCountBarPage"  width="100%" height="400px" />
                  <bar-page v-show="alarmCountBar.length > 50" :total="alarmCountBar.length" @changePage="setDataShow" />
                </div>
                 <!-- 跨区报警情况排名统计(零售) -->
                <div class="static-title">
                  零售跨区报警情况排名统计
                  <el-tooltip class="item" effect="dark" content="跨区报警包含“车辆摆卖报警”和“非属地上牌报警”" placement="bottom-start">
                    <i class="el-icon-warning-outline"></i>
                  </el-tooltip>
                </div>
                <div class="alarm-echarts-container">
                  <div class="alarm-inflow">
                    <div class="alarm-in inflow" v-loading ="crossOutBarLoading">
                      <div class="alarm-inflow-search-tool" style="margin-bottom: 10px;">
                        <div class="alarm-inflow-title">大区间跨区报警情况排名top10</div>
                        <div class="alarm-inflow-search">
                          <statis-search modelName="crossSearch" @search="queryStatic" :regions="resiosOptions" :province="provinceOptions" :cities="citiesOptions" :dealer="dealerOptions"/>
                        </div>
                        <!-- <div class=""></div> -->
                      </div>
                      <div class="sort-container">
                        排序方式 <el-radio-group v-model="cruxAuditDataRetailVo.crossSortBy.sortKey">
                                  <el-radio label="rate">实际报警率</el-radio>
                                  <el-radio label="count">报警数</el-radio>
                                </el-radio-group>
                      </div>
                      <mix-echarts id="rCrossEcharts" :options="crossAlarmCount" :tabName="activeName" width="100%" height="420px" />
                      <!-- <bar-echarts id="allCrossEcharts" :tabName="activeName" :options="alarmInCountBar"  width="100%" height="420px" /> -->
                    </div>
                    <div class="alarm-out inflow" v-loading ="crossInBarLoading">
                      <div class="alarm-inflow-search-tool" style="margin-bottom: 10px;">
                        <div class="alarm-inflow-title">大区内跨区报警率排名top10</div>
                        <div class="alarm-inflow-search">
                          <statis-search modelName="crossRateSearch" @search="queryStatic" :regions="resiosOptions" :province="provinceOptions" :cities="citiesOptions" :dealer="dealerOptions"/>
                        </div>
                      </div>
                      <div class="sort-container">
                        排序方式 <el-radio-group v-model="cruxAuditDataRetailVo.crossRateSortBy.sortKey">
                                  <el-radio label="rate">实际报警率</el-radio>
                                  <el-radio label="count">报警数</el-radio>
                                </el-radio-group>
                      </div>
                      <mix-echarts id="rCrossRateEcharts" :options="crossAlarmRate" :tabName="activeName" width="100%" height="420px" />
                    </div>
                  </div>
                </div>
                <!-- 非属地流入流出统计(零售) -->
                <div class="static-title">零售非属地流入流出统计</div>
                <div class="alarm-echarts-container">
                  <div class="alarm-inflow">
                    <div class="alarm-in inflow" v-loading ="inflowBarLoading">
                      <div class="alarm-inflow-search-tool">
                        <div class="alarm-inflow-title">非属地报备流入排名top10</div>
                        <div class="alarm-inflow-search">
                          <statis-search modelName="inflowSearch" @search="queryStatic" :show-dealer="false" :regions="resiosOptions" :province="provinceOptions" :cities="citiesOptions" :dealer="dealerOptions"/>
                        </div>
                      </div>
                      <bar-echarts id="rInEcharts" :tabName="activeName" :options="alarmInCountBar"  width="100%" height="420px" />
                    </div>
                    <div class="alarm-out inflow" v-loading ="outflowBarLoading">
                      <div class="alarm-inflow-search-tool">
                        <div class="alarm-inflow-title">非属地报备流出排名top10</div>
                        <div class="alarm-inflow-search">
                          <statis-search modelName="outflowSearch" @search="queryStatic" :show-dealer="false" :regions="resiosOptions" :province="provinceOptions" :cities="citiesOptions" :dealer="dealerOptions"/>
                        </div>
                      </div>
                      <bar-echarts id="rOutEcharts" :tabName="activeName" :options="alarmOutCountBar"  width="100%" height="420px" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </transition>
        </el-tab-pane>
        <!-- 出行统计 -->
        <el-tab-pane label="出行" name="cruxAuditDataTravelVo">
           <transition name="fade-transform" mode="out-in">
            <div class="section">
              <div class="top-item-container">
                <statis-items ref="cruxAuditDataTravelVo" :counts="tabs[activeName]" @search="queryData"/>
              </div>
              <div class="section-container">
                <!-- 报警类型分布统计(出行) -->
                <div class="static-title">出行报警类型分布统计</div>
                <div class="alarmType-echarts-container">
                  <div class="left">
                    <pie-echarts id="tPieAlarmType" width="100%" height="450px" :tabName="activeName" :titleLocation="'left'" :options="totleTravelCount"/>
                  </div>
                  <div class="right" style="align-items: center;">
                    <div>
                      <pie-echarts id="'tvehicleSellRetail'" width="100%" height="300px" title="车辆摆卖报警大区分布-出行" :tabName="activeName" :options="vehicleSellTravel" :legend="pieLegend" />
                    </div>
                    <div>
                      <pie-echarts id="'tColonyRetail'" width="100%" height="300px" title="非属地上牌报警大区分布-出行" :tabName="activeName" :options="colonyTravel" :legend="pieLegend" />
                    </div>
                    <div>
                      <pie-echarts id="'tOffLocationRetail'" width="100%" height="300px" title="异地开票报警大区分布-出行" :tabName="activeName" :options="offLocationTravel" :legend="pieLegend" />
                    </div>
                  </div>
                </div>
                <!-- 车辆报警情况统计(出行) -->
                <div class="static-title">出行车辆报警情况统计</div>
                <div class="alarm-echarts-container" v-loading ="alarmBarLoading">
                  <statis-search modelName="alarmSearch" @search="queryStatic" :regions="resiosOptions" :province="provinceOptions" :cities="citiesOptions" :dealer="dealerOptions"/>
                  <bar-echarts id="tBarAlarmType" :tabName="activeName" :horizontal="alarmCountBar.length <=40" :options="alarmCountBarPage"  width="100%" height="400px" />
                  <bar-page v-show="alarmCountBar.length > 50" :total="alarmCountBar.length" @changePage="setDataShow" />
                </div>
                 <!-- 跨区报警情况排名统计(出行) -->
                <div class="static-title">
                  出行跨区报警情况排名统计
                  <el-tooltip class="item" effect="dark" content="跨区报警包含“车辆摆卖报警”和“非属地上牌报警”" placement="bottom-start">
                    <i class="el-icon-warning-outline"></i>
                  </el-tooltip>
                </div>
                <div class="alarm-echarts-container">
                  <div class="alarm-inflow">
                    <div class="alarm-in inflow">
                      <div class="alarm-inflow-search-tool" style="margin-bottom: 10px;">
                        <div class="alarm-inflow-title">零售大区间跨区报警情况排名top10</div>
                        <div class="alarm-inflow-search">
                          <statis-search modelName="crossSearch" @search="queryStatic" :regions="resiosOptions" :province="provinceOptions" :cities="citiesOptions" :dealer="dealerOptions"/>
                        </div>
                        <div class="sort-container" style="top: 50px; left: 0px;">
                        排序方式 <el-radio-group v-model="cruxAuditDataTravelVo.crossSortBy.sortKey">
                                  <el-radio label="rate">实际报警率</el-radio>
                                  <el-radio label="count">报警数</el-radio>
                                </el-radio-group>
                        </div>
                      </div>
                      <mix-echarts id="tCrossEcharts" :options="crossAlarmCount" :tabName="activeName" width="100%" height="420px" />
                      <!-- <bar-echarts id="allCrossEcharts" :tabName="activeName" :options="alarmInCountBar"  width="100%" height="420px" /> -->
                    </div>
                    <div class="alarm-out inflow">
                      <div class="alarm-inflow-search-tool" style="margin-bottom: 10px;">
                        <div class="alarm-inflow-title">零售大区内跨区报警率排名top10</div>
                        <div class="alarm-inflow-search">
                          <statis-search modelName="crossRateSearch" @search="queryStatic" :regions="resiosOptions" :province="provinceOptions" :cities="citiesOptions" :dealer="dealerOptions"/>
                        </div>
                        <div class="sort-container" style="top: 50px; left: 0px;">
                        排序方式 <el-radio-group v-model="cruxAuditDataTravelVo.crossRateSortBy.sortKey">
                                    <el-radio label="rate">实际报警率</el-radio>
                                    <el-radio label="count">报警数</el-radio>
                                  </el-radio-group>
                        </div>
                      </div>
                      <mix-echarts id="tCrossRateEcharts" :options="crossAlarmRate" :tabName="activeName" width="100%" height="420px" />
                    </div>
                  </div>
                </div>
                <!-- 非属地流入流出统计(出行) -->
                <div class="static-title">出行非属地流入流出统计</div>
                <div class="alarm-echarts-container">
                  <div class="alarm-inflow">
                    <div class="alarm-in inflow" v-loading ="inflowBarLoading">
                      <div class="alarm-inflow-search-tool">
                        <div class="alarm-inflow-title">非属地报备流入排名top10</div>
                        <div class="alarm-inflow-search">
                          <statis-search modelName="inflowSearch" @search="queryStatic" :show-dealer="false" :regions="resiosOptions" :province="provinceOptions" :cities="citiesOptions" :dealer="dealerOptions"/>
                          
                        </div>
                      </div>
                      <bar-echarts id="tInEcharts" :tabName="activeName" :options="alarmInCountBar"  width="100%" height="420px" />
                    </div>
                    <div class="alarm-out inflow" v-loading ="outflowBarLoading">
                      <div class="alarm-inflow-search-tool">
                        <div class="alarm-inflow-title">非属地报备流出排名top10</div>
                        <div class="alarm-inflow-search">
                          <statis-search modelName="outflowSearch" @search="queryStatic" :show-dealer="false" :regions="resiosOptions" :province="provinceOptions" :cities="citiesOptions" :dealer="dealerOptions"/>
                        </div>
                      </div>
                      <bar-echarts id="tOutEcharts" :tabName="activeName" :options="alarmOutCountBar"  width="100%" height="420px" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </transition>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import NavBarBread from '@/components/NavBarBread'
import statisItems from './components/statisItems'
import pieEcharts from './components/echarts/pieEcharts'
import barEcharts from './components/echarts/barEcharts'
import mixEcharts from './components/echarts/mixEcharts'
import statisSearch from './components/echarts/statisSearch'
import barPage from './components/echarts/barPage'
import { queryAlarmDistribution, queryVehicleAlarm, queryCrossRegional, queryInflow, queryOutflow, queryDealerList } from '@/api/crossRegionalMonitoring'
import { dateFtt, getStorageByKey, unique_arr_by_key } from '@/utils/public'
const copyJson = function(json) {
  return JSON.parse(JSON.stringify(json))
}
const arraySortByKey = function(arr, key) {
  arr.sort(function(a,b){
    return b[key] - a[key]
  })
  return arr
}
const levelOneOptions = [
  { value: 4, text: '全部' },
  { value: 2, text: '省份' },
  { value: 3, text: '城市' }
]
export default {
  name: 'StatisticalAnalysis',
  components: { NavBarBread, statisItems, pieEcharts, barEcharts, mixEcharts, statisSearch, barPage },
  data() {
    return {
      levelOneOptions,
      activeName: 'cruxAuditDataTotalVo',
      tabs: {
        'cruxAuditDataTotalVo': {
          'counts': [
            { key: 'vehicleCount', itemName: '监控车辆总数', count: 0 },
            { key: 'vehicleRetailCount', itemName: '监控零售车辆数', count: 0 },
            { key: 'vehicleTravelCount', itemName: '监控出行车辆数', count: 0 }
          ],
          'alarmCounts': [
            { key: 'alarmCount', itemName: '车辆报警总数', count: 0 },
            { key: 'alarmRetailCount', itemName: '零售车辆报警数', count: 0 },
            { key: 'alarmTravelCount', itemName: '出行车辆报警数', count: 0 }
          ],
          'appearContuns': [
            { key: 'total', itemName: '审批提交总数', count: 0 },
            { key: 'todo', itemName: '待审批数', count: 0 },
            { key: 'have', itemName: '已审批数', count: 0 },
            { key: 'refuse', itemName: '审批驳回数', count: 0 },
            { key: 'in', itemName: '跨大区审批数', count: 0 },
            { key: 'out', itemName: '大区内审批数', count: 0 }
          ]
        },
        'cruxAuditDataRetailVo': {
          'counts': [
            { key: 'vehicleRetailCount', itemName: '监控零售车辆总数', count: 0 }
          ],
          'alarmCounts': [
            { key: 'alarmRetailCount', itemName: '监控零售车辆报警总数', count: 0 }
          ],
          'appearContuns': [
            { key: 'total', itemName: '零售审批提交总数', count: 0 },
            { key: 'todo', itemName: '待审批数', count: 0 },
            { key: 'have', itemName: '已审批数', count: 0 },
            { key: 'refuse', itemName: '审批驳回数', count: 0 },
            { key: 'in', itemName: '跨大区审批数', count: 0 },
            { key: 'out', itemName: '大区内审批数', count: 0 }
          ]
        },
        'cruxAuditDataTravelVo': {
          'counts': [
            { key: 'vehicleTravelCount', itemName: '监控出行车辆总数', count: 0 }
          ],
          'alarmCounts': [
            { key: 'alarmTravelCount', itemName: '监控出行车辆报警总数', count: 0 }
          ],
          'appearContuns': [
            { key: 'total', itemName: '出行审批提交总数', count: 0 },
            { key: 'todo', itemName: '待审批数', count: 0 },
            { key: 'have', itemName: '已审批数', count: 0 },
            { key: 'refuse', itemName: '审批驳回数', count: 0 },
            { key: 'in', itemName: '跨大区审批数', count: 0 },
            { key: 'out', itemName: '大区内审批数', count: 0 }
          ]
        }
      },
      
      /**
       * tab对应相关数据
       * cruxAuditDataTotalVo -总量tab
       * cruxAuditDataRetailVo -零售tab
       * cruxAuditDataTravelVo -出行tab
       */
      pieLoading: true,
      alarmBarLoading: true,
      crossInBarLoading: true,
      crossOutBarLoading: true,
      inflowBarLoading: true,
      outflowBarLoading: true,
      cruxAuditDataTotalVo: {
        // 车辆报警情况统计查询参数
        alarmSearch: {
          type: 4,
          tabType: 0,
          screen: []
        },
        // 大区间跨区报警情况排名查询参数
        crossSearch: {
          type: 4,
          screen: [],
          tabType: 0,
          crossRegional: 1
        },
        crossSortBy: {
          sortKey: 'rate'
        },
        // 大区间跨区报警率排名查询参数
        crossRateSearch: {
          type: 4,
          screen: [],
          tabType: 0,
          crossRegional: 0,
        },
        crossRateSortBy: {
          sortKey: 'rate'
        },
         // 非属地报备流入排名查询参数
        inflowSearch: {
          type: 4,
          tabType: 0,
          screen: []
        },
         // 非属地报备流出排名查询参数
        outflowSearch: {
          type: 4,
          tabType: 0,
          screen: []
        }
      },
      cruxAuditDataRetailVo: {
        alarmSearch: {
          type: 4,
          tabType: 1,
          screen: []
        },
        // 大区间跨区报警情况排名查询参数
        crossSortBy: {
          sortKey: 'rate'
        },
        crossSearch: {
          type: 4,
          screen: [],
          tabType: 1,
          crossRegional: 1
        },
        // 大区间跨区报警率排名查询参数
        crossRateSortBy: {
          sortKey: 'rate'
        },
        crossRateSearch: {
          type: 4,
          screen: [],
          tabType: 1,
          crossRegional: 0
        },
         // 非属地报备流入排名查询参数
        inflowSearch: {
          type: 4,
          tabType: 1,
          screen: []
        },
         // 非属地报备流出排名查询参数
        outflowSearch: {
          type: 4,
          tabType: 1,
          screen: []
        }
      },
      cruxAuditDataTravelVo: {
        alarmSearch: {
          type: 4,
          tabType: 2,
          screen: []
        },
        // 大区间跨区报警情况排名查询参数
        crossSortBy: {
          sortKey: 'rate'
        },
        crossSearch: {
          type: 4,
          tabType: 2,
          screen: [],
          crossRegional: 1
        },
        // 大区间跨区报警率排名查询参数
        crossRateSortBy: {
          sortKey: 'rate'
        },
        crossRateSearch: {
          type: 4,
          tabType: 2,
          screen: [],
          crossRegional: 0
        },
         // 非属地报备流入排名查询参数
        inflowSearch: {
          type: 4,
          tabType: 2,
          screen: []
        },
         // 非属地报备流出排名查询参数
        outflowSearch: {
          type: 4,
          tabType: 2,
          screen: []
        }
      },
      pieLegend: {
        orient: 'horizontal',
        left: 'center', // 水平位置，可选值：'left', 'center', 'right'
        top: 'bottom' // 垂直位置，可选值：'top', 'middle', 'bottom'
      },
      alarmCount: [], // 报警类型分布统计左侧饼状图数据
      totleTravelCount: [], // 报警类型分布出行统计左侧饼状图数据
      totleRetailCount: [], // 报警类型分布零售统计左侧饼状图数据

      vehicleSellRetail: [], // 车辆摆卖-零售统计 右侧饼状图数据
      vehicleSellTravel: [], // 车辆摆卖-出行统计 右侧饼状图数据
      
      offLocationRetail: [], // 异地开票-零售统计 右侧饼状图数据
      offLocationTravel: [], // 异地开票-出行统计 右侧饼状图数据
      
      colonyRetail: [], // 非属地上牌-零售统计 右侧饼状图数据
      colonyTravel: [], // 非属地上牌-出行统计 右侧饼状图数据

      alarmCountBar: [], //车辆报警情况统计 柱状图总数据
      alarmCountBarPage: [], //车辆报警情况统计 柱状图分页 当前页数据

      crossCountBar: [], //大区间跨区报警情况排名
      crossRateCountBar: [], //大区内跨区报警率排名 柱状图数据

      alarmInCountBar: [], //非属地报备流入排名统计 柱状图数据
      alarmOutCountBar: [], //非属地报备流出排名统计 柱状图数据

      searchTimeParams: {
        startTime: '',
        endTime: '',
      },
      dealerOptions:[],
       // 大区数据
      regions: getStorageByKey('regionsMap'),
      provinceOptions: [],
      citiesOptions: [],
      resiosOptions: []
    }
  },
  computed: {
    // 大区间跨区报警数
    crossAlarmCount() {
      const sortWay = this[this.activeName].crossSortBy.sortKey
      const result = this.crossCountBar || []
      if (result.length) {
        const sortKey = sortWay === 'rate' ? 'alarmRate' : 'alarmCount'
        // 排序
        const sortedArr = arraySortByKey(result, sortKey)
        // 截取前10个
        const topTen = sortedArr.length > 10 ? sortedArr.slice(0, 10) : sortedArr
        return topTen
      } else {
        return []
      }
    },
    // 大区内跨区报警数率
    crossAlarmRate() {
      const sortWay = this[this.activeName].crossRateSortBy.sortKey
      const result = this.crossRateCountBar || []
      if (result.length) {
        const sortKey = sortWay === 'rate' ? 'alarmRate' : 'alarmCount'
        // 排序
        const sortedArr = arraySortByKey(result, sortKey)
        // 截取前10个
        const topTen = sortedArr.length > 10 ? sortedArr.slice(0, 10) : sortedArr
        return topTen
      } else {
        return []
      }
    }
  },
  created() {
    this.initCityAndProvince()
    this.queryDealerList()
  },
  mounted() {
  },
  
  methods: {
    initCityAndProvince() {
      const regions = getStorageByKey('regionsMap')
      this.resiosOptions = regions.map(item => ({
          value: item.bigAreaCode,
          text: item.bigAreaName
        })
      )
      const allProvince = regions.reduce((newArr, current) => {
          return newArr.concat(current.provinceList)
        }, [])
      const province = unique_arr_by_key('provinceCode', allProvince)
      this.provinceOptions = province.map(item => (
        {
          value: item.provinceCode,
          text: item.provinceName
        }
      ))
      console.log( this.provinceOptions)
      const cities  = province.reduce((newArr, current) => {
        return newArr.concat(current.cityDtoList)
      }, [])
      this.citiesOptions = cities.map(item => (
        {
          value: item.cityCode,
          text: item.cityName
        }
      ))
    },
    async queryDealerList() {
      const { data } = await queryDealerList()
      const items = data.data
      this.dealerOptions = items.map(item => (
        {
          value: item.dealerCode,
          text: item.dealerName
        }
      ))
    },
    initEcharts() {
      this.queryPieData(this.searchTimeParams)
      this.queryVehicleAlarmCharts()
      this.queryInflowCharts()
      this.queryOutflowCharts()
      this.queryCrossRegionalInCharts()
      this.queryCrossRegionalOutCharts()
    },
    // 关键数据整理
    formaCruxData(data) {
      if(!data) return
      for(var key in this.tabs) {
        const currentTab = this.tabs[key]
        currentTab.counts.forEach(item => {
          item.count = data[item.key]
        })
        currentTab.alarmCounts.forEach(item => {
          item.count = data[item.key]
        })
        currentTab.appearContuns.forEach(item => {
          item.count = data[key][item.key]
        })
      }
    },
    // 关键数据
    queryData(responseData) {
      const cruxData = responseData
      this.formaCruxData(cruxData)
      this.setSearchTime()
      this.queryPieData(this.searchTimeParams)
      this.queryVehicleAlarmCharts()
      this.queryCrossRegionalInCharts()
      this.queryCrossRegionalOutCharts()
      this.queryInflowCharts()
      this.queryOutflowCharts()
    },
    // 整理时间参数
    setSearchTime() {
      // const params = {}
      const invoiceDate = this.$refs[this.activeName].invoiceDate
      if (invoiceDate && invoiceDate.length) {
        this.searchTimeParams['startTime'] = dateFtt(invoiceDate[0])
        this.searchTimeParams['endTime'] = dateFtt(invoiceDate[1], 'yyyy-MM-dd') +' 23:59:59'
      }
    },
    // 报警类型分布
    async queryPieData(params) {
      this.pieLoading = true
      const { data } = await queryAlarmDistribution(params)
      const result = data.data
      if(result && result.length) {

        const retailCount = result[0].list// 零售数据
        const travelCount = result[1].list  // 出行数据

        retailCount.forEach(item => item.type = 0)
        travelCount.forEach(item => item.type = 1)

        // 组装总数据 左边大饼状图总计
        const { alarmCount, totleTravelCount, totleRetailCount } = this.createAlarmCount(retailCount, travelCount)

        this.alarmCount = alarmCount
        this.totleTravelCount = totleTravelCount
        this.totleRetailCount = totleRetailCount
        
        // 组装右边分项数据
        this.createAlarmItemCount([...retailCount, ...travelCount])
      }
      this.pieLoading = false
    },
    // 车辆报警情况统计
    async queryVehicleAlarmCharts() {
      this.alarmBarLoading = true
      const params =  copyJson(this[this.activeName].alarmSearch)
      const { screen } = params
      if (screen && screen.length) {params.screen = screen.join(',') }
      const { data } = await queryVehicleAlarm({ ...this.searchTimeParams, ...params})
      this.alarmBarLoading = false
      const result = data.data
      if (result && result.length) {
        result.forEach(item => {
          item.name = item.abscissaValue,
          item.value = item.alarmCount,
          item.tooltips = `
            <div style="color: '#333'; font-weight: 650">${item.abscissaValue}</div>
            车辆报警总数：${item.alarmCount}台<br/>
            ${this.activeName === 'cruxAuditDataRetailVo' || this.activeName === 'cruxAuditDataTotalVo'  ? `零售车辆报警数：${item.retailAlarmCount}台<br/>` : ''}
            ${this.activeName === 'cruxAuditDataTravelVo' || this.activeName === 'cruxAuditDataTotalVo' ? `出行车辆报警数：${item.travelAlarmCount}台<br/>` : ''}
            <br/>
            车辆摆卖报警数：${item.vehicleSellAlarmCount}台<br/>
            非属地上牌报警数：${item.colonyAlarmCount}台<br/>
            bc分离报警数：${item.bcAlarmCount}台
          `
        })
        this.alarmCountBar = result

      }else {
        this.alarmCountBar = []
      }
      this.alarmCountBarPage = this.alarmCountBar.length > 50 ? this.alarmCountBar.slice(0, 50) : this.alarmCountBar

      this.alarmBarLoading = false
    },
    setDataShow(params) {
      const { start, end } = params
      this.alarmCountBarPage = this.alarmCountBar.slice(start - 1, end)
    },
    // 大区间跨区报警情况排名统计
    async queryCrossRegionalOutCharts() {
      this.crossOutBarLoading = true
      const params =  copyJson(this[this.activeName].crossSearch)
      const { screen } = params
      if (screen && screen.length) {params.screen = screen.join(',') }
      const { data } = await queryCrossRegional({ ...this.searchTimeParams, ...params })
      const result = data.data
      this.crossCountBar = result
      this.crossOutBarLoading = false
    },
    // 大区内跨区报警情况排名统计
    async queryCrossRegionalInCharts() {
      this.crossInBarLoading = true
      const params =  copyJson(this[this.activeName].crossRateSearch)
      params.crossRegional = '0'
      const { screen } = params
      if (screen && screen.length) {params.screen = screen.join(',') }
      const { data } = await queryCrossRegional({ ...this.searchTimeParams, ...params })
      const result = data.data
      this.crossRateCountBar = result
      this.crossInBarLoading = false
    },
    // 非属地报备流入排名统计
    async queryInflowCharts() {
      this.inflowBarLoading = true
      const params =  copyJson(this[this.activeName].inflowSearch)
      
      const { screen } = params
      if (screen && screen.length) {params.screen = screen.join(',') }
      const { data } = await queryInflow({ ...this.searchTimeParams, ...params, type: params.type || '0' })
      const result = data.data
      if (result && result.length) {
        result.forEach(item => {
          item.name = item.abscissaValue,
          item.value = item.alarmCount
          item.tooltips = `
            <div style="color: '#333'; font-weight: 650">${item.abscissaValue}</div>
            流入车辆数：${item.alarmCount}台<br/>
            ${this.activeName === 'cruxAuditDataRetailVo' || this.activeName === 'cruxAuditDataTotalVo'  ? `流入零售车辆数：${item.retailAlarmCount}台<br/>` : ''}
            ${this.activeName === 'cruxAuditDataTravelVo' || this.activeName === 'cruxAuditDataTotalVo' ? `流入出行车辆数：${item.travelAlarmCount}台<br/>` : ''}
            <br/>车辆摆卖流入数：${item.vehicleSellAlarmCount}台<br/>
            非属地上牌流入数：${item.colonyAlarmCount}台
          `
        })
        this.alarmInCountBar = result
      } else {
        this.alarmInCountBar = []
      }
      this.inflowBarLoading = false
    },
    // 非属地报备流出排名统计
    async queryOutflowCharts() {
      this.outflowBarLoading = true
      const params =  copyJson(this[this.activeName].outflowSearch)
      const { screen } = params
      if (screen && screen.length) {params.screen = screen.join(',') }
      const { data } = await queryOutflow({ ...this.searchTimeParams, ...params })
      const result = data.data
      if (result && result.length) {
        result.forEach(item => {
          item.name = item.abscissaValue,
          item.value = item.alarmCount,
          item.tooltips = `
            <div style="color: '#333'; font-weight: 650">${item.abscissaValue}</div>
            流出车辆数：${item.alarmCount}台<br/>
             ${this.activeName === 'cruxAuditDataRetailVo' || this.activeName === 'cruxAuditDataTotalVo'  ? `流出零售车辆数：${item.retailAlarmCount}台<br/>` : ''}
            ${this.activeName === 'cruxAuditDataTravelVo' || this.activeName === 'cruxAuditDataTotalVo' ? `流出出行车辆数：${item.travelAlarmCount}台<br/>` : ''}
            <br/>车辆摆卖流出数：${item.vehicleSellAlarmCount}台<br/>
            非属地上牌流出数：${item.colonyAlarmCount}台
          `
        })
        this.alarmOutCountBar = result
      } else {
        this.alarmOutCountBar = []
      }
      this.outflowBarLoading = false
    },
    /**
     * 通过零售和出行数据 生成总数
     * retailCount 零售数据
     * travelCount 出行数据
     */
    createAlarmCount(retailCount, travelCount) {
      const alarmCount = []
      const totleTravelCount = []
      const totleRetailCount = []

      const totleTravel = travelCount.reduce((pre, cur) => {
        return pre + cur.list[0].totalCount
      }, 0)

      const totleRetail = retailCount.reduce((pre, cur) => {
        return pre + cur.list[0].totalCount
      }, 0)

      retailCount.forEach(r => {
        const rValue = r.list[0].totalCount
        totleRetailCount.push({
          name: r.alarmType,
          value: rValue,
          alarmProportion: +(((rValue / totleRetail) * 100).toFixed(0))
        })
        travelCount.forEach(t => {
          const tValue = t.list[0].totalCount
          if (r.alarmType === t.alarmType) {
            alarmCount.push({
              name: r.alarmType,
              retailCount: rValue,
              travelCount: tValue,
              value: rValue + tValue
            })
            totleTravelCount.push({
              name: t.alarmType,
              value: tValue,
              alarmProportion: +(((tValue / totleTravel) * 100).toFixed(0))
            })
          }
        })
      })
      const totleCount = alarmCount.reduce((pre, cur) => {
        return pre + cur.value
      }, 0)
      alarmCount.forEach(item => {
        const percet = +(((item.value / totleCount) * 100).toFixed(0))
        item.alarmProportion = percet,
        item.tooltips = `
              ${item.name}报警占比：${percet}%<br/>
              ${item.name}报警数：${item.value}台<br/>
              零售车报警数：${item.retailCount}<br/>
              出行车报警数：${item.travelCount}
            `
      })
      return {
        alarmCount,
        totleTravelCount,
        totleRetailCount
      }
    },
    createAlarmItemCount(counts) {
      let key = ''
      counts.forEach((item) => {
        // 车辆摆卖——出行and 零售
        if (item.type && item.alarmType === '车辆摆卖') { key = 'vehicleSellTravel' }
        if (!item.type && item.alarmType === '车辆摆卖') { key = 'vehicleSellRetail' }

        // 非属地上牌——出行and 零售
        if (item.type && item.alarmType === '非属地上牌') { key = 'colonyTravel' }
        if (!item.type && item.alarmType === '非属地上牌') { key = 'colonyRetail' }
        
        // 异地开票——出行and 零售
        if (item.type && item.alarmType === '异地开票') { key = 'offLocationTravel' }
        if (!item.type && item.alarmType === '异地开票') { key = 'offLocationRetail' }
        
        this[key] = []
        item.list.forEach(l => {
          this[key].push({
            value: l.alarmCount,
            name: l.bigAreaName,
            alarmProportion: l.alarmProportion,
            tooltips: `<div style="color: '#333'; font-weight: 650">${l.bigAreaName}</div>
              ${item.alarmType}报警占比：${l.alarmProportion}%<br/>
              ${item.alarmType}报警数：${l.alarmCount}台
            `
          })
        })
      })
    },
    queryStatic(params) {
      const { modelName, screen, type } = params
      this[this.activeName][modelName].type = type
      this[this.activeName][modelName].screen = screen

      switch(modelName) {
        case 'alarmSearch':
          this.queryVehicleAlarmCharts()
        break;
        case 'crossSearch':
          this.queryCrossRegionalOutCharts()
        break;
        case 'crossRateSearch':
          this.queryCrossRegionalInCharts()
        break;
        case 'inflowSearch':
          this.queryInflowCharts()
        break;
        case 'outflowSearch':
          this.queryOutflowCharts()
        break;
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.section-container{
  .static-title{
    background: rgba(242, 242, 242, 1);
    line-height: 32px;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
    color: #333;
    font-weight: 650;
    font-size: 14px;
    margin-top: 10px;
  }
  .alarmType-echarts-container {
    display: flex;
    .left {
      width: 30%;
      align-items: center;
    }
    .right{
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      div{
        width: 33%;
        flex-grow: 1;
        text-align: center;
      }
    }
  }
  .alarm-echarts-container{
    margin-top: 10px;
    .search-tool{
      text-align: right;
    }
    .alarm-inflow{
      width: 100%;
      display: flex;
      .inflow{
        flex: 1;
        position: relative;
        .alarm-inflow-search-tool {
          width: 100%;
          box-sizing: border-box;
          padding-left: 40px;
          display: flex;
          justify-content: space-between;
          .alarm-inflow-title{
            color: #333;
            font-size: 12px;
            font-weight: 650;
            line-height: 36px;
          }
        }
        .sort-container{
          position: absolute;
          z-index: 1000;
          padding-left: 40px;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
